<template>
  <div>
    <table class="tb">
      <tr>
        <th>
          <label for="all">全选</label>
          <input
            id="all"
            v-model="checkAll"
            @click="handleCheckAllChange"
            type="checkbox"
          />
        </th>
        <th>产品图片</th>
        <th>编号</th>
        <th>品牌名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) of goodsList" :key="item.id">
        <td>
          <input type="checkbox" v-model="checkArr" :value="item" />
        </td>
        <td>
          <img height="50" width="50" :src="item.imgSrc" alt="" />
        </td>
        <td>
          {{ item.code }}
        </td>
        <td>
          {{ item.productName }}
        </td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="decrement(item)">-</button>
          &nbsp;
          <b>{{ item.count }}</b>
          &nbsp;
          <button @click="increment(item)">+</button>
        </td>
        <td>
          <button @click="del(index)">删除</button>
        </td>
      </tr>
    </table>
    <div class="total add">
      <h1 style="text-align: right">
        总价格:<b style="color: red">{{ total }}</b>
      </h1>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "all",
      checkArr: [],
      checkAll: false,
      //   total:"0.00"
    };
  },
  computed: {
    total() {
      //未勾选商品
      if (this.checkArr.length == 0) {
        return "0.00";
      } else {
        //选中商品
        return this.checkArr
          .reduce((total, item) => {
            return (total += item.price * item.count);
          }, 0)
          .toFixed(2);
      }
    },
  },
  watch: {
    //观察checkAll的变化,只要checkArr的数组长度和goodsList的数组长度相等,说明全部被选中了,需要把checkAll的值设置为true,不然就设置为false
    checkArr(newCheckArr) {
      // console.log(newVal)
      if (this.goodsList.length === newCheckArr.length) {
        //需要将checkArr设置为true
        this.checkAll = true;
      } else {
        //没有被全选
        this.checkAll = false;
      }
    },
    target: {//响应props target数据的变化
      handler(newVal) {
        console.log(newVal);
		//删除checkArr对应的数据就可以了
		let id = newVal.id; //传递过来的被删除的id
		console.log(this.checkArr)
		//过滤掉当前数组中id和传过来id相等的对象
		this.checkArr  = this.checkArr.filter(item=>{
			return item.id!==id
		})
      },
      deep: true,
    },
  },
  methods: {
    //处理点击全选按钮的逻辑
    handleCheckAllChange(e) {
      // console.log(123)
      // console.log(e.target.checked)
      let checked = e.target.checked;
      //直接判断newVal,如果是true,表示需要全选了
      //应该让checkArr 等于 goodsList

      //主动点击全选的时候,让列表选中和不选中
      //当我们通过逻辑去设定chekAll的时候,就不要控制列表是否选中了
      if (checked) {
        this.checkArr = this.goodsList;
      } else {
        this.checkArr = [];
      }
    },
    //删除逻辑
    del(index) {
      this.$emit("del", index);
    },
    //点击数量减少按钮
    decrement(item) {
      if (item.count <= 1) {
        return;
      }
      item.count--;
    },
    //点击数量增加按钮
    increment(item) {
      item.count++;
    },
  },
  props: {
    //接收被删除的数据
    target: {
      type: Object,
    },
    //接收的数据
    goodsList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>
<style scoped>
.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
</style>
